﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		
		<style>
		*{
		padding:0px; margin:0;
		}
		a{
		text-decoration:none;
		}
		
		ul,li{list-style:none;}
		h1,h2,h3,h4,h5,h6{font-size:16px;font-weight:100;}
		/*      开头            */
		
	  .bigbox{
       width:1000px;
	  
	  margin:0 auto;
	  background:url(img/top.jpg);
	
	  }
	  /*      title       */
	  .title{
	  width:1000px;
	  height:204px;
	  
	  }
		.title .top{
		height:126px;
		line-height:126px;
		
		}
	.title .top h2{
	font-size:44px;
	color:#fff;
	} 
	.title  li{
	float:left;
	margin-right:34px;
	line-height:22px;
	}
	.title ul a{
	font-size:22px;
	color:#fff;
	}
	/*   content    */
	.border{
	width:960px;
	height:1500px;
	background:rgb(46,111,168);
	padding:20px;
	}
    .border .content{
	width:900px;
	height:1430px;
	padding:30px;
	background:rgb(79,134,182);
	}
	/*   content top    */
	  .content .contenttop{
	  height:482px;
	  width:902px;
	  
	  }
	  .content .contenttop .top1{
	  width:270px;
	  height:430px;
	  background:#fff;
	  padding:10px;
	  float:left;
	  margin-right:16px;
	  
	  }
	  .content .contenttop .top1 .top11{
	  width:270px;
	  height:432px;
	  background:#ececec;
	
	  }
	  .content .contenttop .top1 .top11 img{
	  width:270px;
	  height:256px;
	  padding:0px;
	  }
	  .content .contenttop .top1 .top11 h3{
	  line-height:28px;
	  font-size:14px;
	  color:#226039;
	  text-align:center;
	  }
	  .content .contenttop .top1 .top11 p{
	  line-height:22px;
	  font-size:14px;
	  color:#666;
	  }
	  
	  .content .contenttop .top2{
	  width:270px;
	  height:430px;
	  background:#fff;
	  padding:10px;
	  float:left;
	   margin-right:16px;
	  
	  }
	  .content .contenttop .top2 .top21{
	  width:270px;
	  height:432px;
	   background:#ececec;
	
	  }
	  .content .contenttop .top2 .top21 img{
	  width:270px;
	  height:256px;
	  padding:0px;
	  }
	  .content .contenttop .top2 .top21 h3{
	  line-height:28px;
	  font-size:14px;
	  color:#226039;
	  text-align:center;
	  }
	  .content .contenttop .top2 .top21 p{
	  line-height:22px;
	  font-size:14px;
	  color:#666;
	  }
	  
	  
	  .content .contenttop .top3{
	  width:270px;
	  height:430px;
	  background:#fff;
	  padding:10px;
	  float:left;
	  
	  }
	  .content .contenttop .top3 .top31{
	  width:270px;
	  height:432px;
	   background:#ececec;
	
	  }
	  .content .contenttop .top3 .top31 img{
	  width:270px;
	  height:256px;
	  padding:0px;
	  }
	  .content .contenttop .top3 .top31 h3{
	  line-height:28px;
	  font-size:14px;
	  color:#226039;
	  text-align:center;
	  }
	  .content .contenttop .top3 .top31 p{
	  line-height:22px;
	  font-size:14px;
	  color:#666;
	  }
		
		
		/*   center  */
		.content .content1{
		
		}
		
	 .content .content-center{
	  height:220px;
	  width:902px;	
	  
	  }
	  .content .content1{
		width:902px;
		height:220px;
		background:blue;
		}
	  .content .content-center .center-left{
	  width:90px;
	  height:220px;
	  float:left;
	 
	  border-right:6px solid #afdcf8;
	  padding-right:30px;
	  
	  }
	  .content .content-center .center-left p{
	  line-height:20px;
	  font-size:14px;
	  color:#b5cbd9;
	  text-align:right
	  }
	  .content .content-center .center-left h3{
	  line-height:30px;
	  font-size:20px;
	  color:#65b1e1;
	  text-align:right;
	  
	  }
	  .content .content-center .center-right{
	  width:690px;
	  height:166px;
	  background:#579dc5;
	  float:right;
	  padding:15px 30px 25px 30px;
	  }
	  .content .content-center .center-right img{
	  width:200px;
	  height:120px;
	  float:left;
	  margin-right:20px;
	  }
	 .content .content-center .center-right h4{
	  line-height:42px;
	  font-size:20px;
	  color:#fff;
	 }
	 .content .content-center .center-right .p1{
	 display:inline-clock;
	 width:464px;
	 height:60px;
	 line-height:20px;
	 font-size:14px;
	 color:#fff;
	 float:left;
	 margin-bottom:20px;
	 }
	 .content .content-center .center-right input{
	 width:97px;
	 height:30px;
	 border:1px solid;
	 border-radius:5px;
	 background:#075498;
	 color:#fff;
	 float:right;
	 
	 
	 }
	  
	  
		
		</style>
		
		</head>
		
	<body>
	<div class="bigbox">
	      <div class="title">
		       <div class="top"><h2>zhu·小井の博客 </h2> 
			   </div>
		
		<ul>
		<li><a href="#">首页</a></li>
		<li><a href="#">关于我</a></li>
		<li><a href="#">慢生活</a></li>
		<li><a href="#">碎言碎语</a></li>
		<li><a href="#">模板分享</a></li>
		<li><a href="#">学无止境</a></li>
		<li><a href="#">留言</li>
		
		</ul>
		   
		  </div>
	    
	<div class="border">
	     <div class="content">
		        <div class="contenttop">
		     <div class="top1">
		          <div class="top11">
				  <img src="img/t01.jpg">
				  <h3>灯具公司复古风格PSD设计稿</h3>
				  <p>此模板为PSD设计稿，复古风格。首页主要突出产品以及公司简介。。手绘灯作为头部背景图片，这个比较特别。HTML可以做出灯一闪一闪的效果，或者</p>
			      </div>
			 </div>

             <div class="top2">
		          <div class="top21">
				  <img src="img/t02.jpg">
				  <h3>灯具公司复古风格PSD设计稿</h3>
				  <p>此模板为PSD设计稿，复古风格。首页主要突出产品以及公司简介。。手绘灯作为头部背景图片，这个比较特别。HTML可以做出灯一闪一闪的效果，或者</p>
			      </div>
			 </div> 

              <div class="top3">
		          <div class="top31">
				  <img src="img/t03.jpg">
				  <h3>灯具公司复古风格PSD设计稿</h3>
				  <p>此模板为PSD设计稿，复古风格。首页主要突出产品以及公司简介。。手绘灯作为头部背景图片，这个比较特别。HTML可以做出灯一闪一闪的效果，或者</p>
			      </div>
			 </div> 			 
                          
			 
		 </div>
		  
		  
		  
		  <div class="content-center">
		  
		     <div class="center-left">
			 <p>08-08</p>
			 <h3>2017</h3>
			 </div>
			 <div class="center-right">
			 <h4>三步滚动条触动CSS动画效果</h4>
			 <div class="img"><img src="img/t03.jpg"></div>
			  <p class="p1">现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果。ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力。。。</p>
			 <input type="submit" value="阅读全文>>">
			 </div>
		</div>
				  <div class="content-center">
		  
		     <div class="center-left">
			 <p>08-08</p>
			 <h3>2017</h3>
			 </div>
			 <div class="center-right" style="background:#3594cb">
			 <h4>三步滚动条触动CSS动画效果</h4>
			 <div class="img"><img src="img/t03.jpg"></div>
			  <p class="p1">现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果。ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力。。。</p>
			 <input type="submit" value="阅读全文>>">
			 </div>
		</div>
						  <div class="content-center">
		  
		     <div class="center-left">
			 <p>08-08</p>
			 <h3>2017</h3>
			 </div>
			 <div class="center-right">
			 <h4>三步滚动条触动CSS动画效果</h4>
			 <div class="img"><img src="img/t03.jpg"></div>
			  <p class="p1">现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果。ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力。。。</p>
			 <input type="submit" value="阅读全文>>">
			 </div>
		</div>
						  <div class="content-center">
		  
		     <div class="center-left">
			 <p>08-08</p>
			 <h3>2017</h3>
			 </div>
			 <div class="center-right" style="background:#3594cb">
			 <h4>三步滚动条触动CSS动画效果</h4>
			 <div class="img"><img src="img/t03.jpg"></div>
			  <p class="p1">现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果。ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力。。。</p>
			 <input type="submit" value="阅读全文>>">
			 </div>
		</div>

	
	
	</div>
	
	
	
	
	
	
	
	
	
	
	
	</div>
	
	</body>
	</html>